<!--
 * @Author: zulezhe
 * @Date: 2021-01-13 11:19:20
 * @LastEditors: zulezhe
 * @LastEditTime: 2021-02-18 13:50:27
 * @Description: In User Settings Edit
 * @FilePath: \canvas\01-基本\01.绘制线.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
      }
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="canvas-container"></div>
    <script>
      window.onload = () => {
        console.log(ctx);
        // 绘制一条直线: lineTo(x,y)
        ctx.beginPath();
        ctx.moveTo(50, 50);
        ctx.lineTo(300, 50);
        ctx.strokeStyle = "red";
        ctx.stroke();
        // 绘制一条折线
        ctx.beginPath();
        ctx.moveTo(100, 500); //画笔的起点
        ctx.lineTo(200, 400); //当前画笔的终点.如果没有beginPath(),这个坐标也是下一个画笔的起点
        ctx.lineTo(300, 500); //当前画笔的终点
        ctx.lineTo(400, 400); //当前画笔的终点
        ctx.strokeStyle = "red"; //画笔的颜色
        ctx.stroke(); //开始描边
        // 设置线宽:lineWidth
        ctx.beginPath();
        ctx.moveTo(150, 150);
        ctx.lineTo(150, 250);
        ctx.lineWidth = 4; //设置线宽
        ctx.strokeStyle = "red";
        ctx.stroke();

        /**
         * 线的末端样式 lineCap='butt | round | square';
         * butt :连接头为矩形,不会增加,默认值
         * round:连接头为圆滑的,会在原有线长的基础上增加
         * square:连接头为矩形,会在原有线长基础上增加
         * 注意:lineCap在连接处是不生效的
         */

        // 连接头为buut的线
        ctx.beginPath();
        ctx.moveTo(400, 600);
        ctx.lineTo(600, 600);
        ctx.lineCap = "butt";
        ctx.strokeStyle = "blue";
        ctx.stroke();
        // 连接头为round的线
        ctx.beginPath();
        ctx.moveTo(400, 700);
        ctx.lineTo(600, 700);
        ctx.lineCap = "round";
        ctx.strokeStyle = "blue";
        ctx.stroke();
        // 连接头为square的线
        ctx.beginPath();
        ctx.moveTo(400, 800);
        ctx.lineTo(600, 800);
        ctx.lineCap = "square";
        ctx.stroke();
        // 参考线
        ctx.beginPath();
        ctx.moveTo(600, 400);
        ctx.lineTo(600, 900);
        ctx.moveTo(400, 400);
        ctx.lineTo(400, 900);
        ctx.lineWidth = 0.5;
        ctx.lineCap = "square";
        ctx.strokeStyle = "#000";
        ctx.stroke();

        /**
         * 线条结合处样式:2 个长度不为 0 的相连部分 ( 线段，圆弧，曲线 )连接处的样式
         * context.lineJoin='miter | bevel | round';
         * miter:会根据两条线时自动延长形成一个尖角,会超出原线与线相交的坐标
         * bevel:两条线相交的时候自动截取成为一个斜面
         * round: 相交处圆角样式
         */
        // 尖角
        ctx.beginPath();
        ctx.moveTo(850, 200);
        ctx.lineTo(900, 300);
        ctx.lineTo(950, 200);
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#000";
        ctx.lineJoin = "miter";
        ctx.stroke();
        // 圆角
        ctx.beginPath();
        ctx.moveTo(1000, 200);
        ctx.lineTo(1050, 300);
        ctx.lineTo(1100, 200);
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#000";
        ctx.lineJoin = "round";
        ctx.stroke();
        // 平角
        ctx.beginPath();
        ctx.moveTo(1200, 200);
        ctx.lineTo(1250, 300);
        ctx.lineTo(1300, 200);
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#000";
        ctx.lineJoin = "bevel";
        ctx.stroke();
        ctx.closePath();
        // 参考线
        ctx.beginPath();
        ctx.moveTo(700, 300);
        ctx.lineTo(1400, 300);
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#000";
        ctx.stroke();
        /**
         *  绘制虚线
         *  ctx.setLineDash(segments);
         * 如果参数只有一个,虚线的间隔和线长是一致的
         * 如果参数为奇数,虚线的间隔就会别复制并重复 [10, 20, 30] 会变成 [10, 20, 30, 10, 20, 30],
         * 如果参数为偶数,则
         */
        ctx.beginPath();
        ctx.lineWidth = 4;
        ctx.strokeStyle = "green";
        ctx.setLineDash([5, 15, 20, 40]);
        ctx.moveTo(400, 200);
        ctx.lineTo(800, 200);
        ctx.stroke();
        ctx.closePath();
        ctx.save();

        /**
         * 获取虚线间隔:getLineDash();
         */
        console.log(ctx.getLineDash()); //[5, 15, 20, 40]
      };
    </script>
    <script src="./index.js"></script>
  </body>
</html>
